<template>
    <a-config-provider :locale="locale">
        <div id="App" class="app-wrapper">
            <router-view v-if="noBar" class="main"/>
            <template v-if="!noBar">
                <Sidebar class="sidebar-container" />
                <div class="main-container" style="position: relative;" :class="{fold: isFold}">
                    <div class="wrap_top">
                        <Header />
                        <Breadcrumb />
                    </div>
                    <div class="content-wrap">
                        <transition class="main-content" name="fade-transform" mode="out-in">
                        <keep-alive :max="1">
                            <router-view class="right-side" v-if="$route.meta.keepAlive"/>
                            </keep-alive>
                        </transition>
                        <transition class="main-content" name="fade-transform" mode="out-in">
                            <router-view class="right-side" v-if="!$route.meta.keepAlive"/>
                        </transition>
                    </div>
                </div>
            </template>
        </div>
    </a-config-provider>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { Getter } from 'vuex-class'
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
@Component
export default class App extends Vue {
    noBar: boolean = true
    locale: any = zhCN

    @Getter('isFold') isFold!: boolean

    // mounted () {
    //     const code = this.$util.getQueryString('code')
    //     if (!code) return
    //     this.$api.memberPersonalInfoFetch({ code: '何燕' }).then(({data}: any) => {
    //         localStorage.setItem('sessionId', data.sessionId)
    //         localStorage.setItem('userInfo', JSON.stringify(data))
    //         // 更新vuex数据
    //         this.$store.commit('userInfo', data)
    //         this.$store.commit('roleId', data.roleId)
    //         this.$router.push('/acceptance/acceptanceList')
    //     })
    // }

    @Watch('$route', { immediate: true })
    routeChange (nVal: any, oVal: any) {
        this.noBar = ['/login', '/error', '/largeScreen'].some(item => nVal.path.startsWith(item)) || nVal.path === '/'
    }
}
</script>

<style lang="scss">
html {
    background: #f0f2f5;

}
#App {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 100%;
    min-width: 1400px;
    height: 100%;
    &::after {
        content: "";
        display: block;
        clear: both;
    }
}
.content-wrap{
    height:calc(100% - 170px);
    width:100%;
    position: absolute;
    bottom: 0;
    right: 0;
    overflow: auto;
}
.wrap_top{
    width: 100%;
    height: 124px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
}
/*fade-transform*/
.fade-transform-leave-active,
.fade-transform-enter-active {
    transition: all 0.2s linear;
}
.fade-transform-enter {
    opacity: 0;
    transform: translateX(-30px);
}
.fade-transform-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
</style>
